<template>
  <div class="appeal-work">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="交易申诉" />

    <div class="appeal-card div-sizing">
      <div class="card-title">问题描述</div>
      <u--input v-model="content" rows="4" autosize type="textarea" maxlength="50" placeholder="请您尽可能细致的描述，以便我们及时更进。"
        show-word-limit />
      <div class="card-upload">
        <div class="upload-title">上传照片</div>
        <u-upload width="250" height="250" uploadIcon="plus" uploadText='上传照片' :fileList="fileList1"
          @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1" class="camera-btm-div">
        </u-upload>
      </div>
    </div>
    <div class="vant-btn">
      <u-button type="primary" @click="submitWork">确认提交</u-button>
    </div>
  </div>
</template>

<script>
  import {
    putAppealOrder
  } from '@/api/deal/index.js'
import {
    url_config
  } from '@/common/config.js'
  export default {
    data() {
      return {
        content: '',
        fileList1: [],
        id: null, // 订单ID
        img: [], // 上传后的地址
        imageListY: [], // 预览地址
      }
    },
    onLoad(opt) {
      this.id = opt.id
      if (!this.id) {
        this.$ui.toast('刷新重试')
        // this.$ui.back()
      }
    },
    methods: {
      submitWork() {
        if (this.img.length === 0) {
          this.$ui.toast('请上传凭证')
          return
        }
        if (this.content === '' || this.content.length < 15) {
          this.$ui.toast('请填写申诉内容，内容不得小于15字')
          return
        }
        putAppealOrder({
          id: this.id,
          content: this.content,
          apply: this.img
        }).then(res => {
          if (res.code === 1) {
            this.$ui.toast('提交成功')
            this.$ui.back()
          }
        })
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 1231456789);
          if (result.code == 1) {
            this.img = result.url
          } else {
            this.$ui.toast('上传失败')
          }
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `${url_config}/api/upload/uploads`, // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              const date = JSON.stringify(res.data)
              setTimeout(() => {
                resolve(JSON.parse(res.data))
              }, 1000)
            }
          });
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .appeal-work {
    background: #F2F2F2;

    .appeal-card {
      width: 100%;
      height: 790rpx;
      padding: 20rpx;
      margin-top: 20rpx;
      position: relative;
      background: #ffffff;

      .card-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }

      .van-cell {
        padding: 0;
        line-height: 34rpx;
      }
    }

    .camera-div-img {
      width: 100%;
      height: 300rpx;
      margin-top: 30rpx;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .camera-img {
        width: 32%;
        margin-right: 2%;
        position: relative;
      }

      .camera-img3 {
        margin-right: 0;
      }

      .camera-del {
        font-size: 40rpx;
        color: #9496ac;
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .card-upload {
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;

      .upload-title {
        margin-bottom: 20rpx;
      }

      .ewm-div {
        width: 190rpx;
        height: 190rpx;
        justify-content: center;
        flex-direction: column;
        background: #dddddd;

        .van-icon {
          font-size: 50rpx;
          color: #ffffff;
        }

        span {
          margin-top: 10rpx;
          font-size: 20rpx;
          color: #ffffff;
        }
      }
    }

    .vant-btn {
      margin-top: 324rpx;

      .van-button {
        width: 358rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 44rpx;
      }
    }
  }
</style>

<style lang="less">
  .appeal-work {
    .van-field__control {
      width: 100%;
    }
  }
</style>
